<template>
	<!--Elment-ui：NavMenu 导航菜单 -->
	<el-menu
		default-active="1-4-1"
		class="el-menu-vertical-demo"
		@open="handleOpen"
		@close="handleClose"
		:collapse="isCollapse"
		background-color="#545c64"
		text-color="#fff"
		active-text-color="#ffd04b"
	>
		<h3>{{isCollapse ? '':'浦发银行通用管理系统'}}</h3>
		<!-- 一级菜单 -->
		<el-menu-item
			@click="clickMenu(item)"
			v-for="item in noChildren"
			:key="item.name"
			:index="item.name"
		>
			<i :class="`el-icon-${item.icon}`"></i
			><!-- es6模板字符串 -->
			<span slot="title">{{ item.label }}</span>
		</el-menu-item>
		<!-- 二级菜单 -->
		<el-submenu
			v-for="item in hasChildren"
			:key="item.label"
			:index="item.label"
		>
			<template slot="title">
				<i :class="`el-icon-${item.icon}`"></i>
				<span slot="title">{{ item.label }}</span>
			</template>
			<el-menu-item-group v-for="subItem in item.children" :key="subItem.path">
				<el-menu-item @click="clickMenu(subItem)" :index="subItem.path">{{
					subItem.label
				}}</el-menu-item>
			</el-menu-item-group>
		</el-submenu>
	</el-menu>
</template>

<script>
export default {
	data() {
		return {
			// isCollapse: false, // 是否折叠
			menuData: [
				// 一级菜单
				{
					path: "/",
					name: "home",
					label: "首页",
					icon: "s-home",
					url: "Home/Home",
				},
				{
					path: "/mall",
					name: "mall",
					label: "商品管理",
					icon: "video-play",
					url: "MallManage/MallManage",
				},
				{
					path: "/user",
					name: "user",
					label: "用户管理",
					icon: "user",
					url: "UserManage/UserManage",
				},
				// 二级菜单
				{
					label: "其他",
					icon: "location",
					children: [
						{
							path: "/page1",
							name: "page1",
							label: "页面1",
							icon: "setting",
							url: "Other/PageOne",
						},
						{
							path: "/page2",
							name: "page2",
							label: "页面2",
							icon: "setting",
							url: "Other/PageTwo",
						},
					],
				},
			],
		}
	},
	methods: {
		handleOpen(key, keyPath) {
			console.log(key, keyPath)
		},
		handleClose(key, keyPath) {
			console.log(key, keyPath)
		},
		clickMenu(item) {
			if (
				// 避免在当前页面重复跳转
				this.$route.path !== item.path &&
				!(this.$route.path === "/home" && item.path === "/")		
			) {
				//$route指的是当前页面的路由信息对象
				this.$router.push(item.path) //$router指的是VueRouter实例，用于操作路由
			}

			// 更新store数据
			this.$store.commit('selectMenu', item)
		},
	},
	computed: {
		// 对菜单分组
		noChildren() {
			return this.menuData.filter((item) => !item.children)
		},
		hasChildren() {
			return this.menuData.filter((item) => item.children)
		},
		isCollapse() {
			return this.$store.state.tab.isCollapse
		}
	},
}
</script>

// scope表示只在当前文件生效
<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
	width: 200px;
	min-height: 400px;
}
.el-menu {
	height: 100%;
	border-right: none;
	h3 {
		color: #fff;
		text-align: center;
		line-height: 48px;
		font-size: 16px;
		font-weight: 400;
	}
}
</style>
